<template>
  <div class="orders-page">
    <Header />
    
    <main class="main">
      <div class="container">
        <div class="orders-header">
          <h1 class="orders-title">我的订单</h1>
          <p class="orders-subtitle">查看您的所有订单记录</p>
        </div>

        <div class="orders-content">
          <div class="orders-filters">
            <div class="filter-tabs">
              <button 
                class="filter-tab" 
                :class="{ active: activeFilter === 'all' }"
                @click="activeFilter = 'all'"
              >
                全部订单
              </button>
              <button 
                class="filter-tab" 
                :class="{ active: activeFilter === 'pending' }"
                @click="activeFilter = 'pending'"
              >
                待付款
              </button>
              <button 
                class="filter-tab" 
                :class="{ active: activeFilter === 'processing' }"
                @click="activeFilter = 'processing'"
              >
                待发货
              </button>
              <button 
                class="filter-tab" 
                :class="{ active: activeFilter === 'shipped' }"
                @click="activeFilter = 'shipped'"
              >
                已发货
              </button>
              <button 
                class="filter-tab" 
                :class="{ active: activeFilter === 'completed' }"
                @click="activeFilter = 'completed'"
              >
                已完成
              </button>
            </div>
          </div>

          <div class="orders-list">
            <div 
              class="order-card" 
              v-for="order in filteredOrders" 
              :key="order.id"
            >
              <div class="order-header">
                <div class="order-info">
                  <span class="order-number">订单号：{{ order.orderNumber }}</span>
                  <span class="order-date">{{ order.date }}</span>
                </div>
                <div class="order-status" :class="order.status">
                  {{ getStatusText(order.status) }}
                </div>
              </div>

              <div class="order-items">
                <div 
                  class="order-item" 
                  v-for="item in order.items" 
                  :key="item.id"
                >
                  <img :src="item.image" :alt="item.title" class="item-image">
                  <div class="item-info">
                    <h4 class="item-title">{{ item.title }}</h4>
                    <p class="item-spec">{{ item.spec }}</p>
                    <div class="item-price">
                      <span class="price">¥{{ item.price }}</span>
                      <span class="quantity">x{{ item.quantity }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="order-footer">
                <div class="order-total">
                  <span>共 {{ order.totalItems }} 件商品</span>
                  <span class="total-price">总计：¥{{ order.totalAmount }}</span>
                </div>
                <div class="order-actions">
                  <button class="btn btn-secondary" @click="handleViewOrder(order)">
                    查看详情
                  </button>
                  <button 
                    v-if="order.status === 'pending'" 
                    class="btn btn-primary" 
                    @click="handlePayOrder(order)"
                  >
                    立即付款
                  </button>
                  <button 
                    v-if="order.status === 'shipped'" 
                    class="btn btn-primary" 
                    @click="handleConfirmReceive(order)"
                  >
                    确认收货
                  </button>
                </div>
              </div>
            </div>

            <div class="no-orders" v-if="filteredOrders.length === 0">
              <i class="fas fa-shopping-bag"></i>
              <h3>暂无订单</h3>
              <p>您还没有任何订单记录</p>
              <button class="btn btn-primary" @click="$router.push('/')">
                去购物
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

const activeFilter = ref('all')

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: 'SF20241201001',
    date: '2024-12-01',
    status: 'pending',
    totalItems: 2,
    totalAmount: '9,998',
    items: [
      {
        id: 1,
        title: 'iPhone 15 Pro 256GB 钛金色',
        spec: '256GB 钛金色',
        price: '8,999',
        quantity: 1,
        image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=100&h=100&fit=crop&crop=center'
      },
      {
        id: 2,
        title: 'AirPods Pro 第二代',
        spec: '白色',
        price: '999',
        quantity: 1,
        image: 'https://images.unsplash.com/photo-1606220945770-b5b6c2f2b5c5?w=100&h=100&fit=crop&crop=center'
      }
    ]
  },
  {
    id: 2,
    orderNumber: 'SF20241128002',
    date: '2024-11-28',
    status: 'processing',
    totalItems: 1,
    totalAmount: '1,299',
    items: [
      {
        id: 3,
        title: 'Adidas Ultra Boost 22 跑步鞋',
        spec: '白色 42码',
        price: '1,299',
        quantity: 1,
        image: 'https://images.unsplash.com/photo-1551107696-a4b0c5a0d9a2?w=100&h=100&fit=crop&crop=center'
      }
    ]
  },
  {
    id: 3,
    orderNumber: 'SF20241125003',
    date: '2024-11-25',
    status: 'shipped',
    totalItems: 3,
    totalAmount: '2,567',
    items: [
      {
        id: 4,
        title: 'Nike Air Max 270 React',
        spec: '黑白配色 41码',
        price: '899',
        quantity: 1,
        image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&h=100&fit=crop&crop=center'
      },
      {
        id: 5,
        title: 'Sony WH-1000XM5 降噪耳机',
        spec: '黑色',
        price: '1,668',
        quantity: 1,
        image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop&crop=center'
      }
    ]
  }
])

// 根据筛选条件过滤订单
const filteredOrders = computed(() => {
  if (activeFilter.value === 'all') {
    return orders.value
  }
  return orders.value.filter(order => order.status === activeFilter.value)
})

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    pending: '待付款',
    processing: '待发货',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status as keyof typeof statusMap] || status
}

// 处理订单操作
const handleViewOrder = (order: any) => {
  alert(`查看订单详情：${order.orderNumber}`)
}

const handlePayOrder = (order: any) => {
  alert(`支付订单：${order.orderNumber}`)
}

const handleConfirmReceive = (order: any) => {
  if (confirm('确认已收到商品？')) {
    order.status = 'completed'
    alert('确认收货成功！')
  }
}
</script>

<style scoped>
.orders-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.orders-header {
  text-align: center;
  margin-bottom: 40px;
}

.orders-title {
  font-size: 32px;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 10px;
}

.orders-subtitle {
  font-size: 16px;
  color: #636e72;
}

.orders-content {
  max-width: 1000px;
  margin: 0 auto;
}

.orders-filters {
  margin-bottom: 30px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filter-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #636e72;
}

.filter-tab:hover {
  background: #f8f9fa;
  color: #667eea;
}

.filter-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f8f9fa;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-number {
  font-weight: 600;
  color: #2d3436;
  font-size: 14px;
}

.order-date {
  color: #95a5a6;
  font-size: 12px;
}

.order-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.order-status.pending {
  background: #fff3cd;
  color: #856404;
}

.order-status.processing {
  background: #cce5ff;
  color: #004085;
}

.order-status.shipped {
  background: #d4edda;
  color: #155724;
}

.order-status.completed {
  background: #d1ecf1;
  color: #0c5460;
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.order-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 4px;
}

.item-spec {
  font-size: 12px;
  color: #636e72;
  margin-bottom: 8px;
}

.item-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-weight: 600;
  color: #e74c3c;
}

.quantity {
  color: #95a5a6;
  font-size: 12px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f8f9fa;
}

.order-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-total span:first-child {
  font-size: 12px;
  color: #636e72;
}

.total-price {
  font-weight: 600;
  color: #e74c3c;
  font-size: 16px;
}

.order-actions {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary {
  background: #f8f9fa;
  color: #495057;
}

.btn-secondary:hover {
  background: #e9ecef;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.no-orders {
  text-align: center;
  padding: 60px 20px;
  color: #636e72;
}

.no-orders i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #bdc3c7;
}

.no-orders h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #2d3436;
}

.no-orders p {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .filter-tabs {
    flex-wrap: wrap;
  }
  
  .filter-tab {
    flex: 1 1 calc(50% - 4px);
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .order-footer {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .order-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 